<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
     </head>
     <style type="text/css">
          *{
              margin: 0; padding: 0;
          }
          input{
              outline: 0;
          }
          #pwd_level {
              list-style: none; margin: 10px; border-radius: 15px;
              width: 174px; border: solid 1px gainsboro; height: 16px;
          }
          #pwd_level li{
              background: silver;  float: left;
              width: 50px; margin: 4px; height: 8px;
          }
          #pwd_level_tip {
              margin: 10px; width: 174px; height: 16px;
          }
          #pwd_level_tip div{
              float: left; width: 58px; height: 16px;
              text-align: center; line-height: 16px;
              visibility: hidden;
          }
     </style>
     <body>
          <input type="text" name="pwd" id="pwd" value="" size="30"/>
          <ul id="pwd_level">
              <li style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;"></li>
              <li></li>
              <li style="border-top-right-radius: 8px; border-bottom-right-radius: 8px;"></li>
          </ul>
          <div id="pwd_level_tip">
              <div id="">弱</div>
              <div id="">中</div>
              <div id="">强</div>
          </div>
     </body>
     <script>
		var pwd = document.getElementById("pwd");
		var pwd_level = document.getElementById("pwd_level");
        var pwd_level_tip = document.getElementById("pwd_level_tip");
        pwd.onkeyup = function(){
			console.log(this.value);
			
			var hasNumber = false;
			var hasLetter = false;
			var hasSpecSign = false;
			
			for(var i in this.value){
				var asc = this.value.charCodeAt(i);
				if(asc>=48 && asc<=57){
					hasNumber = true;
				} else if(asc>=65 && asc<=90 || asc>=97 && asc<=122){
					hasLetter = true;
				} else {
					hasSpecSign = true;
				}
			}
			
			if(hasSpecSign){
				pwd_level.children[0].style.background = "red";
				pwd_level.children[1].style.background = "orange";
				pwd_level.children[2].style.background = "green";
				pwd_level_tip.children[2].style.visibility = "visible";
				pwd_level_tip.children[1].style.visibility = "hidden";
				pwd_level_tip.children[0].style.visibility = "hidden";
			} else if(hasNumber && hasLetter){
				pwd_level.children[0].style.background = "red";
				pwd_level.children[1].style.background = "orange";
				pwd_level.children[2].style.background = "";
				pwd_level_tip.children[1].style.visibility = "visible";
				pwd_level_tip.children[0].style.visibility = "hidden";
				pwd_level_tip.children[2].style.visibility = "hidden";
			} else {
				pwd_level.children[0].style.background = "red";
				pwd_level.children[1].style.background = "";
				pwd_level.children[2].style.background = "";
				pwd_level_tip.children[0].style.visibility = "visible";
				pwd_level_tip.children[1].style.visibility = "hidden";
				pwd_level_tip.children[2].style.visibility = "hidden";
			}
        }
     </script>
</html>
